<script src="../ExternalLibrary/js/vue.js"></script>
<script src="../ExternalLibrary/js/vue-router.js"></script>

<!---------------------------------- 01.路由就是不同的地址调用不同的代码 start---------------------------------->
<fieldset>
    <legend>01.组件的使用(_26_萃取组件中的js)</legend>
    <div id="routerId">
        <router-link to="/storeplatform">卖家平台</router-link>
        <router-link to="custplatform">买家平台</router-link>
        <router-view></router-view>
    </div>
    <script>
        //1,创建一个路由表
        const router = new VueRouter({
            routes: [//路由表就是一个数组
                {
                    path:"/custplatform",component:{//组件就是一个vue对象
                        data(){//这个data跟vue对象中的data一样,这里之所以这样写是有含义的
                            return {
                                count:500
                            }
                        },
                        template:"<div>买家平台{{count}}<input type='button' value='按钮' @click='fn'/></div>",
                        methods: {
                            fn(){
                                alert('买家平台');
                            }
                        },
                    }
                },
                {
                    path:"/storeplatform",component:{
                        data(){
                            return {
                                count:1200
                            }
                        },
                        template:"<div>卖家平台<input type='button' value='按钮' @click='fn'/></div>",
                        methods:{
                            fn(){
                                alert("卖家平台");
                            }
                        }

                    }
                }
            ]
        })

        //2.创建vue对象
        const vueObj = new Vue({
            el:"#routerId",
            router
        })
    </script>
</fieldset>
<!---------------------------------- 01.路由就是不同的地址调用不同的代码 end---------------------------------->


<!-- 
    传多个参数怎么办？
    答：#/xxx/:x/:x/:x/?a=x&b=x
    $route.params 取/:x/:x/:x/这种形式的参数
    $route.query  取a=x&b=x这种形式的参数
 -->
<!---------------------------------- 02.路由带参数 start---------------------------------->
<fieldset>
    <legend>02.路由带参数</legend>
    <div id="rouParam">
        <router-link to="/article/1">文章1</router-link>
        <router-link to="/article/{'key':'value'}">文章256</router-link>
        <router-link to="/article/986">文章986</router-link>
        <router-view></router-view>
    </div>
    <script>
        //1,创建路由表
        const routerTable = new VueRouter({//$router是由VueRouter提供的系统变量,代表当前路由
            routes:[
                {
                    path:"/article/:id",
                    component:{
                        template:"<div>文章ID:{{$route.params}}</div>"/* 注意1,这里不带r。2,浏览器不报错 */
                    }
                }
            ]
        })

        //2,创建路由对象
        new Vue({
            el:"#rouParam",
            router:routerTable
        })
    </script>
</fieldset>
<!---------------------------------- 02.路由带参数 end---------------------------------->



<!------------------------------- 03.路由的变化 start-------------------------------->
<fieldset>
    <legend>03.监听路由的变化(第一种方式)</legend>
    <div id="rouChange">
        <router-link to="/rchange/shen">文章1</router-link><!-- A处,如果A处与B处的url不对应,DOM就不会显示 -->
        <router-link to="/rchange/guang">文章2</router-link>
        <router-view></router-view>
    </div>
    <script>
        //1,创建路由表
        const rchange = new VueRouter({
            routes:[
                {
                    path:"/rchange/:param",//B处,如果A处与B处的url不对应,DOM就不会显示
                    component:{
                        template:"<div>文章标题是：{{$route.params.param}}</div>"
                    }
                }
            ]
        })

        //2,创建路由对象
        new Vue({
            el:"#rouChange",
            router:rchange,
            watch:{
                $route(newVal,oldVal){
                    console.log('从',oldVal);//path会累加多次,查看日志(因为路径前面没有加"/"!!!!!)
                    console.log('到',newVal);
                }
            }
        })
    </script>
</fieldset>
<!------------------------------- 03.路由的变化 end-------------------------------->


<!------------------------------- 04.路由的变化封装 start-------------------------------->
<!-- 组件的本身就是供大家使用的,如果每个路由对象都实现一遍路由的监听,就比较麻烦了,所以应该写在全局,供大家统一调用 -->
<fieldset>
    <legend>04.监听路由的变化(第二种方式)</legend>
    <div id="rId">
            <router-link to="/url/shen">淘宝1</router-link>
            <router-link to="/url/guang">天猫2</router-link>
            <router-view></router-view>
    </div>
    <script>
        //1,创建路由表
        const rObj = new VueRouter({
            routes:[
                {
                    path:"/url/:id",
                    component:{
                        template:"<div>手机{{$route.params.id}}</div>",
                        beforeRouteUpdate(to,from,next){//这里的to<==>newVal,from<==>oldVal。
                            if(confirm('如果离开本页所做的修改不会保存,是否离开？')){
                                next();
                            }
                        }
                    }
                }
            ]
        })

        //2,创建路由对象
        new Vue({
            el:"#rId",
            router:rObj
        })
    </script>
</fieldset>
<!------------------------------- 04.路由的变化封装 start-------------------------------->
